<template>
  <div class="center" @click="ueClick">
    <!-- <div class="center"> -->
    <h4 class="title">{{ title }} | 事件列表</h4>
    <!-- -->
    <swiper
      :slidesPerView="4"
      :pagination="{
        type: 'progressbar',
      }"
      :modules="[Pagination]"
      class="mySwiper"
    >
      <swiper-slide
        v-for="(item, index) in props.date"
        :key="index"
        @click="look(item.id, index)"
        class="ul"
      >
        <div class="boxL">
          <p class="tag" :class="item.tag != '一般' ? 'tag2' : ''">
            {{ item.tag }}
          </p>
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="boxC">
          <h5>{{ item.title }}</h5>
          <p>时间：{{ item.time }}</p>
          <p>位置：{{ item.position }}</p>
          <p>描述：{{ item.description }}</p>
        </div>
        <div
          id="boxR"
          :style="{
            backgroundColor: props.idx == index ? '#8a3132' : '#659a28',
          }"
        ></div>
      </swiper-slide>
    </swiper>
    <!-- <div class="ul_l">
      <ul :style="{ left: leftValue + 'vw' }">
        <li
          v-for="(item, index) in props.date"
          :key="index"
          @click="look(item.id)"
          :class="index == idx ? 'border' : ''"
        >
          <div class="boxL">
            <p class="tag" :class="item.tag != '一般' ? 'tag2' : ''">
              {{ item.tag }}
            </p>
            <img :src="item.imgUrl" alt="" />
          </div>
          <div class="boxC">
            <h5>{{ item.title }}</h5>
            <p>时间：{{ item.time }}</p>
            <p>位置：{{ item.position }}</p>
            <p>描述：{{ item.description }}</p>
          </div>
          <div id="boxR"></div>
        </li>
      </ul>
    </div>
    <div class="pre" @click="pre">
      <img src="@/assets/btn_l.png" alt="" />
    </div>
    <div class="next" @click="next">
      <img src="@/assets/btn_r.png" alt="" />
    </div> -->
  </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
// import required modules
import { Pagination } from "swiper/modules";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import { Loading } from "element-plus/es/components/loading/src/service";
import { ref, onMounted, onUnmounted, defineProps, defineEmits } from "vue";
import { useRouter, useRoute } from "vue-router";
const props = defineProps({
  date: {
    type: Array,
    default: () => [],
  },
  showChart: {
    type: Boolean,
    default: () => true,
  },
  idx: {
    type: Number,
    default: () => -1,
  },
});
// ueClick  传参
const pageFunctionName1 = (idx) => ue5("function_name1", function_params(idx));
function ueClick() {
  pageFunctionName1(true);
}
function function_params(idx) {
  return idx;
}
const dataIdx = ref(-1);
const emits = defineEmits(["findid", "selected"]);
const router = useRouter();
const route = useRoute();

let title = ref("");
const pageFunctionUe = (idx) => ue5("function_name3", function_params(idx));
// 告警处理 点击处理
const look = (id, idx) => {
    if (props.date[idx].code == "001") {
      // console.log(1);
      pageFunctionUe(0);
    } else if (props.date[idx].code == "002") {
      // console.log(2);
      pageFunctionUe(1);
    } else if (props.date[idx].code == "003") {
      // console.log(3);
      pageFunctionUe(2);
    }
  let ind = props.date.findIndex((item) => item.id == id);
  let obj = {
    id: id,
    show: false,
  };
  emits("selected", idx);
  emits("findid", obj);
};

onMounted(() => {
  title.value = route.meta.title;
});

</script>
<style scoped>
.center {
  position: absolute;
  left: 21.5%;
  bottom: 1%;
  width: 11rem;
  background: url("@/assets/bj_b.png");
  background-size: 100% 100%;
  padding: 0 0.2rem;
  box-sizing: border-box;
}
.title {
  margin: 0.1rem 0 0 0.01rem;
  color: var(--text-color);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ul_l {
  left: 5%;
  top: 0;
  width: 10rem;
  position: relative;
  overflow: hidden;
}
.ul {
  height: 1.2rem;
  padding: 0 0 0 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}
.boxL img {
  display: block;
  padding: 0.1rem 0 0 0;
  width: 0.8rem;
  height: 0.5rem;
}
.swiper {
  height: 1.5rem;
}
:deep(.swiper-pagination-progressbar .swiper-pagination-progressbar-fill) {
  display: block;
  border: none;
  height: 100%;
  border-radius: 0.1rem;
}
:deep(.swiper-pagination-progressbar) {
  top: 90%;
  height: 0.05rem;
  border-radius: 0.1rem;
}
.center .ul::before {
  content: "";
  position: absolute;
  top: 15%;
  left: 0%;
  width: 2px;
  height: 1rem;
  background: #8a3132;
}
.border {
  border-bottom: 2px solid #f36e08;
}
.center ul li div {
  padding: 0 0.02rem;
  font-size: 14px;
}
.boxC {
  font-size: 14px;
}
.boxC h5 {
  padding: 0 0 0.1rem 0;
}
.center .title {
  font-size: 18px;
  padding: 0 0 0.2rem 0.2rem;
}
h5 {
  font-size: 16px;
}
.boxL {
  margin-right: 0.1rem;
}
.boxL,
.boxC {
  margin-top: 0.15rem;
}
.boxC {
  color: var(--text-color);
  flex: 1.5rem 0 0;
}
.tag {
  font-size: 14px;
  width: 0.4rem;
  padding: 0.03rem 0.05rem;
  text-align: center;
  background-color: #8e7950;
  color: var(--text-color);
  border-radius: 5px;
}
.tag2 {
  background-color: #8a3132;
}
#boxR {
  flex: 0.2rem 0 0;
  padding: 0;
  width: 0.2rem;
  height: 0.2rem;
  background-color: #659a28;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0.06rem;
}
/* #boxR{
  background: #8a3132;
} */
img {
  width: 100%;
  height: 100%;
}
</style>
